import React, { useEffect, useState } from 'react';
import { Toast, Dialog } from 'antd-mobile'
import SearchInput from '@/components/SearchInput';
import Index from '@/api/maintenance';
import ListColums from './list';
import "./index.less"

import { MyContext } from '@/context/index';
const { Provider, Consumer } = MyContext

const ModalList = ({ List }) => {
    return (
        <div className="m-b-content">
            {
                List.length > 0 && List.map(el =>
                    <ListColums item={el} key={el.id}></ListColums>
                )
            }
        </div>
    )
}

function DeviceModal (props) {
    const [List, setList] = useState([]);
    useEffect(() => {
        getInfo()
    }, [])

    const getInfo = (val) => {
        Index.waitCheckListByUser({
            user: val ? val : ''
        }).then(res => {
            if (res.data.code == 0) {
                setList(res.data.data)
            }
        })
    }

    const getHandlePressVal = (val) => {
        if (!val) {
            Toast.show({
                content: '请输入出库人',
            })
            return
        }
        getInfo(val)
    }

    const submitBtn = () => {
        let getItems = List.filter(el => el.checkRadio)
        props.submit(getItems)
    }

    return (
        <div className='modal-wrapper'>
            <div className="m-tit">
                <span onClick={() => props.close()}>取消</span>
                <span onClick={submitBtn}>确定</span>
            </div>
            <div className="m-body">
                <Provider value={{ placeholderTxt: "请输入出库人" }}>
                    <SearchInput getHandlePressVal={getHandlePressVal} hideScan={true} />
                    <ModalList List={List}></ModalList>
                </Provider>
            </div>
        </div>
    );
}

export default DeviceModal;
